<template>
  <div class="notice-bar" :style="defaultStyle" :class="isActiveClass">
    <div class="notice-content" :style="contentStyle">
      <img :src="contentData.notice_icon" class="icon" />
      <el-carousel
        :height="carouselHeight"
        :direction="contentData.direction"
        :autoplay="true"
        :interval="3000"
        indicator-position="none"
        arrow="never"
        class="notice-carousel"
      >
        <el-carousel-item v-for="(item, index) in contentData.default_sub_list" :key="item.id">
          <div class="notice-text" :style="textStyle">
            {{ item.title }}
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue'

  const props = defineProps({
    contentData: {
      type: Object,
      default: () => ({})
    },
    isActiveClass: {
      type: String
    }
  })

  const defaultStyle = computed(() => {
    const s = props.contentData.style
    return {
      paddingTop: s.paddingTop,
      paddingLeft: s.paddingLeft,
      paddingRight: s.paddingRight,
      paddingBottom: s.paddingBottom
    }
  })

  const contentStyle = computed(() => {
    const s = props.contentData.style
    return {
      borderRadius: s.borderRadius,
      backgroundColor: s.backgroundColor
    }
  })

  // 设置轮播高度，纵向滚动时需要固定高度
  const carouselHeight = computed(() =>
    props.contentData.direction === 'vertical' ? '32px' : 'auto'
  )

  const textStyle = computed(() => ({
    fontSize: (props.contentData.itemStyle?.fontSize || 14) + 'px',
    color: props.contentData.itemStyle?.color || '#333'
  }))
</script>

<style scoped lang="scss">
  .notice-bar {
    box-sizing: border-box;

    .icon {
      color: #faad14;
      font-size: 16px;
      flex-shrink: 0;
      margin-right: 8px;
      width: 24px;
      height: 24px;
    }

    .notice-content {
      display: flex;
      align-items: center;
      padding: 3px 10px;
    }

    .notice-carousel {
      flex: 1;

      :deep(.el-carousel__item) {
        display: flex;
        align-items: center;
        height: 32px;
        line-height: 32px;
        white-space: nowrap;
      }
    }
  }

  .active-component {
    border: 1px solid var(--el-color-primary);
  }
</style>
